﻿@using HCMS.Extensions
@{
    Layout = "~/Views/Shared/_Layout_Edit_Pear_Layui.cshtml";

    var roleId = ViewContext.HttpContext.Request.Query["roleId"].ToInt(0);
    var roleName = ViewData["roleName"].ToString("");
    var menuIds = ViewData["menuIds"].ToString("");
}

<div class="layui-body layui-bg-gray" style="left:0;">
    <div class="layui-card">
        <form class="layui-form">
            <input type="hidden" name="roleId" value="@roleId" />

            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">基础信息</li>
                </ul>

                <div class="layui-tab-content">
                    <!-- 基础信息 -->
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline layui-form-label content-label">
                                @roleName
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-form-label">权限</div>
                            <div class="layui-input-inline">
                                <div id="classTree"></div>
                                <input type="hidden" id="menuIds" name="menuIds" value="@menuIds" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-fixbar btn-fixbar-box">
                <div class="layui-input-block">
                    <vc:menu-submit action-names="@(new string[]{"save"})"></vc:menu-submit>
                    <button type="button" class="layui-btn layui-btn-primary layui-border-red" lay-on="close">
                        <i class="layui-icon layui-icon-close"></i>关闭
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@section Scripts {
    <script>
        layui.use(['form', 'jquery', 'xmSelect'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            createTree();
            submitFn();

            // 创建分类树
            function createTree() {
                $.ajax({
                    url: '/menu/alltree/',
                    type: 'get',
                    success: function (result) {
                        successFn(result);
                    }
                });

                function successFn(data) {
                    var $menuIds = $('#menuIds');

                    // 初始化选中值。int 集合 转为 string 集合，才能正常初始化
                    var initValue = [];
                    if ($menuIds.val().length > 0) {
                        var menuIdArr = $menuIds.val().split(',');
                        for (var i = 0; i < menuIdArr.length; i++) {
                            initValue.push('' + menuIdArr[i] + '');
                        }
                    }

                    xmSelect.render({
                        el: '#classTree',
                        height: '300px',
                        filterable: true,   // 启用搜索
                        toolbar: {
                            show: true  // 显示工具条
                        },
                        paging: true,   // 启用 分页
                        pageSize: 5,
                        initValue: initValue,    // 初始化选中值
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        data: data,
                        // 选中事件
                        on: function (data) {
                            var ids = [];
                            if (data.arr && data.arr.length > 0) {
                                for (var i = 0; i < data.arr.length; i++) {
                                    ids.push(data.arr[i].id);
                                }
                            }
                            $menuIds.val(ids.join(','));
                        }
                    });
                }
            }

            // 表单提交
            function submitFn() {
                form.on('submit(save)', function (data) {

                    var layerIndex = layer.msg('正在保存', {
                        icon: 16,
                        shade: 0.1,
                        time: 0
                    });

                    $.ajax({
                        url: '/role/saverolemenu/',
                        type: 'post',
                        dataType: 'json',
                        data: data.field,
                        success: function (result) {
                            if (result.code === 200) {
                                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
                                    parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前页
                                });
                            } else {
                                parent.layer.msg(result.message, { icon: 2 })
                            }
                        },
                        complete‌: function(){
                            layer.close(layerIndex);
                        }
                    });

                    return false;
                });
            }
        });
    </script>
}